<?php include(BASE_PATH . "/view/layout/layoutP.phtml"); ?>
<style>
    .loginCont{height: 644px;background: url(/img/login/login_bg.jpg);background-size: 100% 100%;}
    .loginContainer{
        width: 954px;
        min-height: 374px;
        margin: 136px auto 0;
    }
    .clearfix::before{
        display: table;
        content: "";
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .benefits{
        width: 454px;
        background: rgba(128,157,174,0.3);
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#66809dae', EndColorStr='#66809dae');
        color: #fff;
    }
    .benefits h2, .benefits ul li, .benefits h3 {
        padding-left: 132px;
        background-image: url(/img/login/login_icon.png);
        background-repeat: no-repeat;
    }
    .benefits h2 {
        height: 114px;
        line-height: 114px;
        background-position: 0 0;
        font-size: 24px;
        font-weight: 500;
        background-color: rgba(128,157,174,0.3);
    }
    .benefits ul {
        height: 200px;
    }
    .benefits ul li.login_ico1 {
        background-position: 0 -122px;
    }
    .benefits ul li.login_ico2 {
        background-position: 0 -181px;
    }
    .benefits ul li.login_ico3 {
        background-position: 0 -244px;
    }
    .benefits h2, .benefits ul li, .benefits h3 {
        padding-left: 132px;
        background-image: url(/img/login/login_icon.png);
        background-repeat: no-repeat;
    }
    .benefits ul li {
        height: 66px;
        line-height: 66px;
        font-size: 14px;
    }
    .benefits h3 {
        height: 50px;
        line-height: 1.5;
        background-position: 0 -322px;
        font-size: 12px;
        font-weight: 500;
        padding-top: 17px;
        padding-right: 32px;
        background-color: rgba(128,157,174,0.3);
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#66809dae', EndColorStr='#66809dae');
    }
    .login_box {
        width: 454px;
        height: 365px;
        background: #fff;
        border: 1px solid #dcdcdc;
    }
    .login_tab{
        line-height: 42px;
        height: 53px;
        border-top: 4px solid #ea3a3a;
        color: #333;
        font-weight: 700;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        background: #f9f9f9;
        filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#f9f9f9',endColorStr='#f9f9f9',GradientType=0 );
    }
    .login_tab span{
        width: 100%;
        height: 50px;
        line-height: 48px;
        border-bottom: 0;
        float: left;
        text-align: center;
        font-size: 14px;
        color: #666;
        position: relative;
        letter-spacing: 3px;
        background-color: #f2f2f2;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f8f6),to(#f2f2f2));
        background-image: -webkit-linear-gradient(top,#f9f8f6,#f2f2f2);
        background-image: -moz-linear-gradient(top,#f9f8f6,#f2f2f2);
        filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#f9f8f6',endColorStr='#f2f2f2',GradientType=0 );
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .login_input .inputName{
        font-weight: 500;
        width: 80px;
        text-align: right;
        margin: 0;
    }
    .login_input{height: 50px;}
    .mt-40{margin-top: 40px;}
    .login_input input{
        margin-left: 15px;
        padding-left: 10px;
        height: 30px;
        width: 285px;
        border: 1px solid #cdcdcd;
        border-radius: 3px;
    }
    #code{
        width: 160px;
    }
    .loginBtn{
        width: 285px;
        height: 38px;
        margin-left: 98px;
        background-color: #e83535;
        border: 1px solid #e83535;
        background-image: -webkit-linear-gradient(top,#ed3f3f,#e83535);
        color: #fff;
        border-radius: 5px;
        letter-spacing: 3px;
    }
    .loginBtn:hover{background: #FE6262; background-image: -webkit-linear-gradient(top,#ff6868,#f95454);}
    .regFoGetCont{margin-top: 20px;}
    .regBtn{margin-left: 100px;}
    .forGetBtn{margin-left: 166px;}
    #codeSrc{cursor: pointer;margin-left:10px; margin-top: -3px;}
    #login_form .help-block{
        color: #FE6262;
        font-size: 12px;
        padding-left: 99px;
    }
    #login_form .help-span{
        color: #FE6262;
        font-size: 12px;
        padding-left: 99px;
        margin-top: 0;
        display: none;
    }
    .errorti{
        height: 20px;
    }
    #error{
        color: #FE6262;
        font-size: 12px;
        padding-left: 99px;
        margin-top: 0;
        display: none;
    }
</style>
<div class="loginCont clearfix">
    <div class="loginContainer clearfix">
        <div class="benefits fl">
            <h2>会员权益介绍</h2>
            <ul>
                <li class="login_ico1">积分奖励，电子运单专享特权。</li>
                <li class="login_ico2">快速理赔、保价优惠、大陆偏远地区附加费减免。</li>
                <li class="login_ico3">快件路由订阅、快件信息管理、批量下单。</li>
            </ul>
            <h3>登录已开通手机验证码登录。</h3>
        </div>
        <div class="login_box fl">
            <div class="login_tab">
                <span>个人用户登录</span>
            </div>
            <form id="login_form">
                <div class="login_input mt-40">
                    <label class="inputName">账号:</label>
                    <input type="text" name="userName" id="userName" placeholder="账号">
                    <span class="help-span">请输入账号</span>
                </div>
                <div class="login_input">
                    <label class="inputName">密码:</label>
                    <input type="password" name="password" id="password" placeholder="密码">
                    <span class="help-span">请输入密码</span>
                </div>
                <div class="login_input">
                    <label class="inputName">验证码:</label>
                    <input type="text" name="code" id="code" placeholder="验证码" maxlength="4">
                    <img id="codeSrc" src="/application/login/getCode" />
                </div>
            </form>
            <div class="errorti">
                <span id="error" class="help-span">密码与登录用户名不匹配</span>
            </div>
            <div class="loginBtnCont">
                <button type="button" class="loginBtn">登录</button>
                <div class="regFoGetCont">
                    <a href="#" class="regBtn">免费注册</a>
                    <a href="#" class="forGetBtn">忘记密码？</a>
                </div>

            </div>

        </div>
    </div>
</div>
<script type="text/javascript" src="/js/form/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/form/loginform.js"></script>
<script>
$(function () {
    registerValidator.init();
    Login.init();
})
var Login = {
    init:function () {
        this.CodeEvent();
        this.LoginEvent();
    },
    CodeEvent:function () {
        $("#codeSrc").click(function(){
            $.get("/application/login/getCode",function(ret){
                $("#codeSrc").attr("src","/application/login/getCode");
            });
        })
    },
    LoginEvent:function () {
        $(".login_input input").blur(function () {
            var val =  $(this).val();

            if(val == ""){
                $(this).next("span").show();
            }else {
                $(this).next("span").hide();
            }
        })
        $(document).click(function(e){
            $("#error").hide();
            e.stopPropagation();
        });

        $("#login_form").keyup(function (e) {
            if(e.keyCode == 13){
                $(".loginBtn").click();
            }
        })

        $(".loginBtn").click(function () {
            var val =  $(".login_input input").val();
            if(val == ""){
                $(".login_input input").next("span").show();
                return;
            }
            if(!$('#login_form').valid()){
                return;
            }
            var userName = $("#userName").val();
            var password = $("#password").val();
            $.ajax({
                type:"POST",
                url:"/application/login/login",
                datatype:"JSON",
                data:{"userName":userName,"password":password},
                success:function (ret) {
                    ret = JSON.parse(ret);
                    if(ret.result == 0){
                        var callback =function(){
                            window.location.href = "/application/user/index?token="+ret.token;
                        }
                        popupalert("登录成功！","message",callback)
                    }else{
                        $("#error").show();
                        setTimeout(function () {
                            $("#error").hide();
                        },2000)
                    }
                },
                error:function (e) {
                    
                }
            })
        })
    }
}


</script>
<?php include(BASE_PATH . "/view/layout/footer.phtml"); ?>